import './CommentItem.scss'
import React from 'react'
import {connect} from 'react-redux'
class CommentItem extends React.Component {
  constructor(props) {
    super(props)
  }
  renderImgs(item){
    let imgs = item.comment_pics || [];
    if (imgs.length){
      return(
        <div className='img-content clearfix'>
          {
            imgs.map((item,index)=>{
              let src = item.url
              let style={
                backgroundImage:'url('+src+')'
              }
              return <div className={'img-item'} style={style} key={index}></div>
            })
          
          }
        </div>
      )
    } else {
      return null
    }
  }
  renderTags(label){
    return label.map((item)=>{
      return item.content + ','
    })
  }
  formatTime(time){
    let data = new Date(Number(time+ '000'))
    return` ${data.getFullYear() }.${data.getMonth()+1}.${data.getDate()}`
    
  }
  render(){
    let item = this.props.data
    return (
      <div className='comment-item'>
        <div className='comment-time'>{this.formatTime(item.comment_time)}</div>
        <img className='avatar' src={item.user_pic_url || 'http://i.waimai.meituan.com/static/img/default-avatar.png'}/>
        <div className='item-right'>
          <p className='nickname'>{item.user_name}</p>
          <div className='comment-text'>{item.comment}</div>
          {this.renderImgs(item)}
          {item.praise_food_tip? <div className='like-info'>{item.praise_food_tip}</div>:null}
          {item.comment_labels.length?<div className='tag-info'>{this.renderTags(item.comment_labels)}</div>:null}
        </div>
      </div>
    )
  }
}

export default connect(
)(CommentItem)